<template>
	<view class="order_details">
		<!-- 		<view class="order_details_header" v-if="!isRealName">
			<view class="d_top">
				<view class="name">{{data.name}}</view>
				<view class="price">
					<text>￥</text>{{data.price}}
				</view>
			</view>
			<view class="d_center">
				<view class="d_cenImg">
					<image class="imgBox" :src="data.cover" mode="aspectFill"></image>
				</view>
				<view class="d_cenWord">热销中</view>
			</view>
			<view class="d_button">
				<view class="num1">限量：3000张</view>
				<view class="num2">剩余：562张</view>
			</view>
		</view> -->

		<view class="header_img02">
			<view class="header_img02_box">
				<image class="header_img" :src="data.cover" mode="widthFix"></image>
				<!-- 					<view class="title colo_F61616">
						<image class="time_img" src="/static/index/index-fire.png" mode="widthFix"></image>
						<text>热销中</text>
					</view>
					<image class="follow" :src="followState?'/static/index/follow.png':'/static/index/followNo.png'"
						mode="widthFix" @click="followFunc"></image> -->
			</view>
		</view>


		<view class="detailsBox_body">
			<view class="de_li">
				<view class="de_li_title">发行卡名称</view>
				<view class="de_li_content">
					<text>{{data.cardName}}</text>
				</view>
			</view>
			<view class="de_li">
				<view class="de_li_title">交易哈希</view>
				<view class="de_li_content">
					<text class="voucherClass ellipseHide">{{data.voucher}}</text>
					<image src="/static/my/copy01.png" mode="widthFix" @click="copy(data.voucher)"></image>
				</view>
			</view>
			<view class="de_li center">
				<view class="de_li_title">发行方</view>
				<view class="de_li_content">{{data.name}}</view>
			</view>
			<view class="de_li center">
				<view class="de_li_title">支付方式</view>
				<view class="de_li_content">{{data.payType}}</view>
			</view>
			<view class="de_li center">
				<view class="de_li_title">支付金额</view>
				<view class="de_li_content price">
					<text>￥</text>{{data.price}}
				</view>
			</view>
		</view>
		<view class="d_tip">
			温馨提示：数字权益卡售出后不可退
		</view>
		<view style="height:150rpx;"></view>
		<view class="d_footer">
			<view class="d_footer_li" @click="goBack">
				返回详情
			</view>			
			<view class="d_footer_li" v-if="data.status == 2 ">
				订单已完成
			</view>
			<view class="d_footer_li" v-else-if="data.status == 3">
				订单已取消
			</view>
			<view class="d_footer_li" v-else @click="getCode">
				立即支付
			</view>
			
		</view>
		<!--<uni-popup ref="popupRealName" type="dialog">
				<uni-popup-dialog mode="base" :confirmText="'去实名'" :title="'您还未实名认证'"
					:content="'为了更好的保障您的权益，请在购买数字权益卡前，先进行实名认证'" :before-close="true" @close="realNameClose"
					@confirm="realNameConfirm"></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="popupLogin" type="dialog">
				<uni-popup-dialog mode="base" :confirmText="'去登录'" :title="'提示'" :content="'请先登录后进行购买'"
					:before-close="true" @close="loginClose" @confirm="loginConfirm"></uni-popup-dialog>
			</uni-popup> -->
		<!-- 		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	const app = getApp();
	export default {
		data() {
			return {
				id: '',
				orderId: null,
				orderIdN: null,
				followState: false,
				code: '',
				data: {},
				// isRealName: false,
				payStatus: true,
				blankView: true, //空白页
			}
		},
		onLoad(e) {
			// this.id = e.id
			// if (this.$queue.getData('isRealName') != undefined) {
			// 	this.isRealName = this.$queue.getData('isRealName')
			// }
			if (e.orderId != undefined) {
				this.orderId = e.orderId
				this.getWaitPay(e.orderId)
			}else{
				this.orderId = null
				this.getDetailsData(e.id)
			}
			
			// this.code = this.getUrlParam('code')
			

			// if (this.code != null || this.code !== '') {
			// 	app.getLogin()
			// } else {
			// 	this.blankView = false
			// 	console.log(this.code)
			// 	this.payment()
			// }
		},
		onShow() {
			// setTimeout(() => {
			// 	this.blankView = false
			// }, 1000)
		},
		methods: {

			async getDetailsData(id) {
				var res = await this.$api.getPayDetails(id)
				this.id = res.result.id
				this.data = res.result
			},
			async getWaitPay(orderId) {
				var res = await this.$api.getWaitPay(orderId)
				this.id = res.result.id
				this.data = res.result
			},
			copy(text) {
				if(text != ''){
					var _this = this
					 _this.$copyText(text).then(
                        res => {
                          uni.showToast({
                            title: '复制成功',
                            icon: 'none'
                          })
                        }
                      )
				}

			},
			followFunc() {
				this.followState = !this.followState
				if (this.followState) {
					this.$queue.showToast('收藏成功');
				} else {
					this.$queue.showToast('已取消收藏');
				}
			},
			goBack() {
				uni.redirectTo({
					url: '/pages/index/card-details/card-details?id=' + this.id
				})
			},
			getCode() {
				this.payment()
			},
			async payment() {
				var _this = this
				// console.log(_this.data)
				if (wechat.isWechat()) {
					if (_this.payStatus) {
						_this.payStatus = false
						var data ={
							// code:this.code,
							id:_this.id
						}
						if(this.orderId == null){
							delete data.orderId
						}else{
							data.orderId = _this.orderId
						}
						var res = {}
						if(_this.data.issueType == 3){
							uni.showLoading({ title:'正在请求中' })
							try{
								res = await _this.$api.getRushPay(data)
								uni.hideLoading()
								_this.orderIdN = res.result.orderId
								// _this.payStatus = true
								wechat.wexinPay(res.result,  function (callback) {
									setTimeout(() => {
											uni.redirectTo({
												url:'/pages/index/order-details/payment/payment?orderId='+_this.orderIdN+'&payState=1'+'&id='+_this.id
											}) 
										}, 1000)
									
								},function (errorCallback){
									 uni.hideLoading()
									// setTimeout(() => {
									// 		uni.redirectTo({
									// 			url:'/pages/index/order-details/payment/payment?orderId='+_this.id+'&payState=2'+'&id='+_this.id
									// 		}) 
									// 	}, 1000)
								
								  })
							}catch{
								uni.hideLoading()
								_this.payStatus = true
							}finally{
								setTimeout(()=>{
									_this.payStatus = true
								},2000)
							}
							
						}else{
							uni.showLoading({ title:'正在请求中' })
							try{
								res = await _this.$api.payOrder(data)
								uni.hideLoading()
								_this.orderIdN = res.result.orderId
								// _this.payStatus = true
								wechat.wexinPay(res.result,  function (callback) {
									setTimeout(() => {
										    uni.hideLoading()
											uni.redirectTo({
												url:'/pages/index/order-details/payment/payment?orderId='+_this.orderIdN+'&payState=1'+'&id='+_this.id
											}) 
										}, 1000)
									
								},function (errorCallback){
									 uni.hideLoading()
									// setTimeout(() => {
									// 		uni.redirectTo({
									// 			url:'/pages/index/order-details/payment/payment?orderId='+_this.id+'&payState=2'+'&id='+_this.id
									// 		}) 
									// 	}, 1000)
								
								  })
							}catch{
								uni.hideLoading()
								_this.payStatus = true
							}
							finally{
								setTimeout(()=>{
									_this.payStatus = true
								},2000)
							}
							
						}
						

					}else{
						
						setTimeout(()=>{
							this.payStatus = true
						},2000)
					}

				} else {
					uni.showToast({
						title: '请在微信客户端中使用',
						icon: 'none'
					})
				}
				// 1 成功 2 失败
				// var payState = 2
				// // 实名
				// // this.$refs.popupRealName.open()
				// // 登录
				// // this.$refs.popupLogin.open()
				// uni.navigateTo({
				// 	url: '/pages/index/order-details/payment/payment?payState=' + payState
				// })
			},
			realNameConfirm() {
				uni.navigateTo({
					url: '/pages/my/certification/certification'
				})
			},
			loginConfirm() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			realNameClose() {
				this.$refs.popupRealName.close()
			},
			loginClose() {
				this.$refs.popupLogin.close()
			},
		},
		onBackPress(e) {
			//e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作
			if (e.from === 'backbutton') {
				this.$queue.showToast('5555555')
		 	//      if (遮罩层是否隐藏) {
				//        //如果没隐藏
				//        //这里写让遮罩层隐藏的代码
				//      } else {
				//        //如果隐藏了
				//        //这里就写返回上一页
				//         uni.navigateBack()
				//      }
				//      //return true 
				//      //返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
				// //如果要限制必须写成true
				//      return true;
			}
		},

	}
</script>

<style scoped>
	page {
		background: #F8FBFF;
	}

	.order_details {
		padding-top: 40rpx;
	}
	.voucherClass{
		width: 400rpx;
		text-align: right;
		display: inline-block;
	}
	.order_details_header {
		width: 686rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 4rpx 8rpx 16rpx #F3F3F3;
		border-radius: 32rpx;
	}

	.d_top {
		padding: 20rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}

	.d_top .name {
		font-weight: 400;
		font-size: 36rpx;
		line-height: 50rpx;
		color: #000000;
	}

	.price {
		font-weight: 400;
		font-size: 50rpx;
		line-height: 40rpx;
		color: #000000;
	}

	.price text {
		font-size: 30rpx;
	}

	.d_center {
		position: relative;
	}

	.d_center .d_cenImg {
		width: 100%;
		height: 300rpx;
	}

	.d_center .d_cenWord {
		position: absolute;
		width: 146rpx;
		height: 40rpx;
		top: 24rpx;
		left: 0;
		background: linear-gradient(90deg, #FFB13C 0%, #FB9A64 101.39%);
		box-shadow: 0px 4rpx 8rpx rgba(251, 140, 94, 0.5);
		border-radius: 0px 20rpx 20rpx 0px;
		font-size: 20rpx;
		line-height: 40rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.d_button {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 0 30rpx 20rpx;
	}

	.d_button .num1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}

	.d_button .num2 {
		background: #FFEEE9;
		border-radius: 8rpx;
		padding: 4rpx 30rpx;
		font-size: 24rpx;
		color: #FF3D00;
		margin-left: 20rpx;
	}

	/*  */
	.detailsBox_body {
		width: 686rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 4rpx 8rpx 16rpx #F3F3F3;
		border-radius: 32rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-top: 20rpx;
	}

	.de_li {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #000000;
		border-bottom: 1rpx solid #EDEDED;
	}

	.de_li .de_li_title {
		width: 180rpx;
		font-size: 30rpx;
		font-weight: 600;
	}

	.de_li:last-child {
		border-bottom: unset;
	}

	.de_li_content {
		word-wrap: break-word;
	}

	.de_li_content image {
		width: 32rpx;
		height: 30rpx;
		float: right;
		margin-left: 14rpx;
	}

	.center {
		align-items: center;
	}

	.d_tip {
		width: 100%;
		text-align: center;
		color: #999999;
		margin-top: 20rpx;
		font-size: 26rpx;
	}

	.d_footer {
		width: 100%;
		display: flex;
		flex-direction: row;
		position: fixed;
		bottom: 0;
	}

	.d_footer .d_footer_li {
		height: 84rpx;
		width: 50%;
		line-height: 84rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.d_footer .d_footer_li:nth-child(1) {
		background: #F3F3F3;
		color: #333333;
	}

	.d_footer .d_footer_li:nth-child(2) {
		background: linear-gradient(90deg, #0B87F2 0%, #6752EA 100%);
		color: #fff;
	}

	/* 卡 */
	.header_img02_box {
		position: relative;
		width: 630rpx;
		height: auto;
		margin: 0 auto;
	}

	.header_img02_box .header_img {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
	}

	.header_img02_box .title {
		position: absolute;
		top: 22rpx;
		left: 22rpx;
		display: inline-flex;
		align-items: center;
		flex-direction: row;
		padding: 0 16rpx;
		font-size: 22rpx;
		height: 42rpx;
		background: #000000;
		opacity: 0.6;
		border-radius: 200rpx;
	}

	.header_img02_box .title .time_img {
		width: 22rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.header_img02_box .follow {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		width: 64rpx;
		height: 64rpx;
	}

	.header_img02 .title .time_word {
		margin-left: 10rpx;
	}

	.colo_E6C935 {
		color: #E6C935;
	}

	.colo_F61616 {
		color: #F61616;
	}

	/deep/ .uni-dialog-title-text {
		color: #000000;
	}

	/deep/ .uni-dialog-content-text {
		color: #333333;
	}

	.blank_view {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 999;
		background-color: #FFFFFF;
	}
</style>
